<template>
  <div
    class="el-overlay fixed inset-0 backdrop-blur-sm hv-center"
    :class="state.isShow ? '' : 'hidden'"
  >
    <div
      class="absolute py-8 px-10 bg-white rounded-md max-w-[500px] mt-[-150px]"
    >
      <div>
        <span class="text-light">文档加载失败：</span>
        <span class="text-primary"> {{ state.errMsg }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, ref } from "vue";

const state = reactive({
  errMsg: "",
  isShow: false,
});

defineExpose({
  show(errMsg) {
    state.errMsg = errMsg;
    state.isShow = true;
  },
  close() {
    state.isShow = false;
    state.errMsg = "";
  },
});
</script>
<style lang="scss" scoped></style>
